<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: 'home' }">小队</el-breadcrumb-item>
            <el-breadcrumb-item>邀请详情</el-breadcrumb-item>
        </el-breadcrumb>

        <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">邀请详情</h2>

        <div style="margin: 3% 5% 3% 5%;">
            <!-- 选题详情 -->
            <h1>发送的邀请</h1>
            <div style="margin-top:2%;"><!-- 发送的小队邀请 -->
                <el-table :data="sendApply" height="270" border stripe style="width: 100%;">
                    <el-table-column prop="stuId" label="学号" />
                    <el-table-column prop="stuName" label="姓名" />
                    <el-table-column prop="stuSex" label="性别" />
                    <el-table-column prop="stuPhone" label="联系方式" />
                    <el-table-column prop="stuCollege" label="学院" />
                    <el-table-column prop="applyDate" label="邀请时间" :formatter="formatDate" />
                    <!-- <el-table-column fixed="right" label="操作" width="120">
                        <el-button link type="primary" size="small">取消</el-button>
                    </el-table-column> -->
                </el-table>
            </div>

            <h1>收到的邀请</h1>
            <div style="margin-top:2%;"><!-- 收到的小队邀请 -->
                <el-table :data="acceptApply" height="550" border stripe style="width: 100%; height:200px;">
                    <el-table-column prop="stuId" label="学号" />
                    <el-table-column prop="stuName" label="姓名" />
                    <el-table-column prop="stuSex" label="性别" />
                    <el-table-column prop="stuPhone" label="联系方式" />
                    <el-table-column prop="stuCollege" label="学院" />
                    <el-table-column prop="applyDate" label="邀请时间" :formatter="formatDate" />
                    <el-table-column fixed="right" width="120">

                        <template #default="scope">
                            <el-button v-if="scope.row.applyState === 0" link type="primary" size="small"
                                @click="accept(scope.row.applyTeamid, scope.row.applyId)">同意</el-button>
                            <span v-if="scope.row.applyState === 1">已操作</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </div>
    </div>
</template>
<script setup>
import { ref, onBeforeMount } from 'vue';
import requests from '@/api/ajax';

onBeforeMount(() => {

    const asd = requests({ url: '/students/team/myApplySend', method: "get", }).then(res => {
        if (res.code == 20041) {
            sendApply.value = res.rdata;
        }else{
            sendApply.value = null;
        }

    })
        .catch(err => {
            console.error(err);
            // 登录请求失败后的操作
        });

    const acd = requests({ url: '/students/team/myApplyAccept', method: "get", }).then(res => {
        if (res.code == 20041) {
            acceptApply.value = res.rdata;
        }else{
            acceptApply.value = null;
        }
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });

})

const sendApply = ref([
    {
        applyId: '',
        applyTeamid: '',
        applyDate: "",
        applyState: '',
        sendStuid: '',
        gainStuid: '',
        stuId: '',
        stuName: "",
        stuSex: "",
        classId: '',
        stuIdentity: "",
        stuCollege: "",
        stuPhone: "",
        attendedDate: "",
        stuPassword: '',
    }
])

const acceptApply = ref([
    {
        applyId: '',
        applyTeamid: '',
        applyDate: "",
        applyState: '',
        sendStuid: '',
        gainStuid: '',
        stuId: '',
        stuName: "",
        stuSex: "",
        classId: '',
        stuIdentity: "",
        stuCollege: "",
        stuPhone: "",
        attendedDate: "",
        stuPassword: '',
    }
])

const teamInfo = ref(
    {
        taskName: '题目1',
        adviserName: '指导老师1',
        telephone: 12345678987,
        teamDate: '2010-11-10'
    }
)

//接受组队申请
function accept(teamId, applyId) {
    const acd = requests({ url: '/students/team/acceptToTeam/' + teamId + '/' + applyId, method: "get", }).then(res => {
        if (res.code === 20041) {
            alert('同意成功')
        } else {
            alert('入队失败')
        }

    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });

    const adds = requests({ url: '/students/team/myApplyAccept', method: "get", }).then(res => {
        const abd = res.rdata
        acceptApply.value = abd
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });

}

//时间格式化
function formatDate(row, column, cellValue, index) {
    let format = 'YY-mm-dd h:i '
    let date = new Date(cellValue);
    const dataItem = {
        'Y+': date.getFullYear().toString(),
        'm+': (date.getMonth() + 1).toString().padStart(2,'0'),
        'd+': date.getDate().toString().padStart(2,'0'),
        'h+': date.getHours().toString().padStart(2,'0'),
        'i+': date.getMinutes().toString().padStart(2,'0'),
        
    }
    Object.keys(dataItem).forEach((item) => {
        const ret = new RegExp(`(${item})`).exec(format);
        if (ret) {
            format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
        }
    });
    return format
}

</script>